<script lang="ts" name="index" setup>
import { FormInstance } from 'element-plus/lib/components/form'
import {
  Edit,
  View,
  Refresh,
  Operation,
  Plus,
  Delete,
  Upload,
  Download
} from '@element-plus/icons-vue'

const columns = reactive([
  {
    title: '科目名称',
    dataIndex: 'accountName',
    key: 'accountName',
    showInSearch: true,
    valueType: 'select',
    options: [
      {
        value: 'Option1',
        label: 'Option1'
      },
      {
        value: 'Option2',
        label: 'Option2'
      }
    ]
  },
  {
    title: '供应商档案',
    dataIndex: 'supplierFiles',
    key: 'supplierFiles',
    showInSearch: true
  },
  {
    title: '项目编号',
    dataIndex: 'projectNo',
    key: 'supplierFiles',
    showInSearch: true
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName',
    showInSearch: true
  },
  {
    title: '凭证号',
    dataIndex: 'voucherNo',
    key: 'voucherNo',
    showInSearch: true
  },
  {
    title: '金额',
    dataIndex: 'money',
    key: 'money',
    showInSearch: true
  },
  {
    title: '款项发生时间',
    dataIndex: 'payTime',
    key: 'payTime',
    showInSearch: true,
    isDaterange: false,
    valueType: 'date',
    format: 'YYYY-MM-DD'
  },
  {
    title: '账龄',
    dataIndex: 'aging',
    key: 'aging',
    showInSearch: true
  },
  {
    title: '账龄时间分段',
    dataIndex: 'agingTimeSegment',
    key: 'agingTimeSegment',
    showInSearch: true,
    isDaterange: true,
    valueType: 'daterange'
  },
  {
    title: '部门来源',
    dataIndex: 'deptSource',
    key: 'deptSource',
    showInSearch: true
  },
  {
    title: '单位来源',
    dataIndex: 'unitSource',
    key: 'unitSource',
    showInSearch: true
  },
  {
    title: '资金来源',
    dataIndex: 'fundSource',
    key: 'fundSource',
    showInSearch: true
  },
  {
    title: '单位地址',
    dataIndex: 'adress',
    key: 'adress',
    showInSearch: true
  },
  {
    title: '是否发函',
    dataIndex: 'doesSend',
    key: 'doesSend'
  },
  {
    title: '是否回函',
    dataIndex: 'doesReply',
    key: 'doesReply'
  },
  {
    title: '金额是否一致',
    dataIndex: 'doesUnanimous',
    key: 'doesUnanimous'
  },
  {
    title: '操作',
    dataIndex: 'operation',
    key: 'operation'
  }
])
const serchForm = reactive<any>({})
const expand = ref(false)
const currentPage = ref(4)
const pageSize = ref(20)

const serchFormRef = ref<FormInstance>()
const data = reactive([
  {
    date: '2016-05-03',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home'
  },
  {
    date: '2016-05-02',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office'
  },
  {
    date: '2016-05-04',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Home'
  },
  {
    date: '2016-05-01',
    name: 'Tom',
    state: 'California',
    city: 'Los Angeles',
    address: 'No. 189, Grove St, Los Angeles',
    zip: 'CA 90036',
    tag: 'Office'
  }
])

const submitForm = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  console.log(222)
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
}

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
}
</script>

<template>
  <el-card shadow="never" class="search_card">
    <el-form ref="serchFormRef" :model="serchForm" label-position="top">
      <el-row :gutter="20">
        <el-col
          v-for="(item, index) in columns"
          v-show="expand || index + 1 <= 4"
          :key="item.dataIndex"
          :span="6"
        >
          <template v-if="item.showInSearch">
            <el-form-item :label="item.title" :prop="item.dataIndex">
              <template v-if="item.valueType === 'select'">
                <el-select
                  v-model="serchForm[item.dataIndex]"
                  :placeholder="`请选择${item.title}`"
                  style="width: 100%"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="option in item.options"
                    :key="option.value"
                    :label="option.label"
                    :value="option.value"
                  />
                </el-select>
              </template>
              <template v-else-if="item.valueType === 'date'">
                <el-date-picker
                  v-model="serchForm[item.dataIndex]"
                  :type="item.valueType"
                  :placeholder="`请选择${item.title}`"
                  :format="item.format"
                  :value-format="item.format"
                  style="width: 100%"
                />
              </template>
              <template v-else-if="item.valueType === 'datetime'">
                <el-date-picker
                  :type="serchForm[item.dataIndex]"
                  :placeholder="`请选择${item.title}`"
                  :format="item.format"
                  :value-format="item.format"
                  style="width: 100%"
                />
              </template>
              <template v-else-if="item.valueType === 'daterange'">
                <el-date-picker
                  v-model="serchForm[item.dataIndex]"
                  :type="item.valueType"
                  range-separator="-"
                  start-placeholder="开始时间"
                  end-placeholder="结束时间"
                  style="width: 100%"
                />
              </template>
              <template v-else>
                <el-input
                  v-model="serchForm[item.dataIndex]"
                  :placeholder="`请输入${item.title}`"
                  clearable
                />
              </template>
            </el-form-item>
          </template>
        </el-col>
      </el-row>
      <el-row justify="end">
        <el-col :span="24" :style="{ textAlign: 'right' }">
          <el-button type="primary" @click="submitForm(serchFormRef)">
            查询
          </el-button>
          <el-button class="rest_btn" @click="resetForm(serchFormRef)">
            清空
          </el-button>
          <el-button class="expend_btn flex jcc" link @click="expand = !expand"
            >{{ expand ? '收起' : '展开'
            }}<el-icon
              ><component :is="expand ? 'ArrowUp' : 'ArrowDown'" /></el-icon
          ></el-button>
        </el-col>
      </el-row>
    </el-form>
  </el-card>

  <el-card shadow="never" class="table_card flex jsb col afe">
    <div class="table_header title_bar flex jfe">
      <div class="custom_btns">
        <!-- <slot name="tableHeader"></slot> -->
        <el-button type="primary" :icon="Plus">新增</el-button>
        <el-button type="danger" :icon="Delete">批量删除</el-button>
        <el-button type="primary" :icon="Upload">导入</el-button>
        <el-button type="success" :icon="Download">导出</el-button>
      </div>
      <div class="site_btns">
        <el-button :icon="Refresh" circle @click="submitForm(serchFormRef)" />
        <el-button :icon="Operation" circle />
      </div>
    </div>
    <div class="main_table">
      <el-table :data="data" style="width: 100%" height="200">
        <el-table-column fixed prop="date" label="Date" />
        <el-table-column prop="name" label="Name" />
        <el-table-column prop="state" label="State" />
        <el-table-column prop="city" label="City" />
        <el-table-column prop="address" label="Address" />
        <el-table-column prop="zip" label="Zip" />
        <el-table-column fixed="right" label="Operations" width="200">
          <template #default>
            <el-button link type="primary" :icon="View" size="small"
              >查看</el-button
            >
            <el-button link type="primary" :icon="Edit" size="small"
              >编辑</el-button
            >
            <el-button link type="danger" :icon="Delete" size="small"
              >删除</el-button
            >
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="page_box flex jfe">
      <el-pagination
        v-model:currentPage="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 30, 40]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="400"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
    <!-- <el-row>
      <el-col :span="24">
        <div class="table_header title_bar flex jfe">
          <div class="custom_btns">
            <el-button type="primary" :icon="Plus">新增</el-button>
            <el-button type="danger" :icon="Delete">批量删除</el-button>
            <el-button type="primary" :icon="Upload">导入</el-button>
            <el-button type="success" :icon="Download">导出</el-button>
          </div>
          <div class="site_btns">
            <el-button
              :icon="Refresh"
              circle
              @click="submitForm(serchFormRef)"
            />
            <el-button :icon="Operation" circle />
          </div>
        </div>
      </el-col>
      <el-col :span="24">
        <div class="main_table">
          <el-table :data="data" style="width: 100%" height="200">
            <el-table-column fixed prop="date" label="Date" />
            <el-table-column prop="name" label="Name" />
            <el-table-column prop="state" label="State" />
            <el-table-column prop="city" label="City" />
            <el-table-column prop="address" label="Address" />
            <el-table-column prop="zip" label="Zip" />
            <el-table-column fixed="right" label="Operations" width="200">
              <template #default>
                <el-button link type="primary" :icon="View" size="small"
                  >查看</el-button
                >
                <el-button link type="primary" :icon="Edit" size="small"
                  >编辑</el-button
                >
                <el-button link type="danger" :icon="Delete" size="small"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="page_box flex jfe">
            <el-pagination
              v-model:currentPage="currentPage"
              v-model:page-size="pageSize"
              :page-sizes="[10, 20, 30, 40]"
              background
              layout="total, sizes, prev, pager, next, jumper"
              :total="400"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </div>
        </div>
      </el-col>
    </el-row> -->
  </el-card>
</template>

<style lang="less" scoped>
.search_card {
  width: 100%;
  flex-shrink: 0;

  :deep(.el-input__wrapper) {
    width: calc(100% - 22px);
  }

  .rest_btn {
    margin: 0 10px;
  }

  .expend_btn {
    margin-left: 0;
  }
}
.table_card {
  height: inherit;
  flex: 1;
  margin-top: 20px;

  :deep(.el-card__body) {
    height: inherit;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    flex-direction: column;
  }

  .table_header {
    padding-bottom: 20px;

    .site_btns {
      margin-left: 16px;
    }
  }

  .main_table {
    flex: 1;

    :deep(.el-table__header) {
      width: 100% !important;
    }

    :deep(.el-table__body) {
      width: 100% !important;
    }

    .page_box {
      margin-top: 20px;
    }
  }
}
</style>
